<template>
  <div>
    <div class="w-1376">
      <header-search placeholder="请输入模型库名称" :select-display="false" @on-search="handleSearch" />
    </div>

    <div>
      <div class="card-content">
        <div v-for="item in collectList" :key="item.id" class="card">
          <model-base-card
            :toolbar-show="true"
            :collect-status="true"
            :data="item"
            @onClick="handleModelCard(item.id as string)"
            @okCancel="refreshDataList"
          >
            <template #tool-bar>
              <span class="devider"></span>
              <div class="more-box">
                <a-dropdown placement="bottom" @click.stop>
                  <img src="@/assets/img/more-2-fill.svg" alt="" />
                  <template #overlay>
                    <a-menu>
                      <a-menu-item class="menu-icon-item" @click="openEditForm(item.id as string)"> 评估 </a-menu-item>
                      <a-menu-item class="menu-icon-item"> 训练 </a-menu-item>
                      <a-menu-item class="menu-icon-item"> 在线部署 </a-menu-item>
                      <a-menu-item class="menu-icon-item"> 离线部署 </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </div>
            </template></model-base-card
          >
        </div>
      </div>
      <my-infinite-loading :empty="collectList.length === 0" img-margin-top="120px" :identifier="identifier" @infinite="loadData" />
    </div>
    <!-- 模型评估 -->
    <model-evaluation
      :open="modelFormShow"
      :model-id="modelFormState.id"
      @handleOk="modelFormShow = false"
      @handleCancel="modelFormShow = false"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'

  import HeaderSearch, { HeaderSearchEvents } from '@/components/HeaderSearch/index.vue'
  import ModelBaseCard, { ModelCardData } from '@/components/ModelBaseCard/index.vue'
  import { collectionApi } from '@/services/api'

  import ModelEvaluation from '../../components/ModelEvaluation/index.vue'
  import { FavoritePageForm } from '../types'

  const route = useRoute()

  const FAVORITE_TYPE_CASE = 4 //2代表收藏的类型为模型
  const pageForm = ref<FavoritePageForm>({
    objectName: '',
    favoriteType: FAVORITE_TYPE_CASE,
    columns: 'createTime',
    order: 'desc',
    offset: 1,
    limit: 24
  })
  const collectList = ref<ModelCardData[]>([])
  const identifier = ref<number>(1)

  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await collectionApi.commonModelFavorite(pageForm.value)

      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      collectList.value?.push(...records)
      console.log(collectList.value, 'collectList.value', records)
    } catch (error) {
      $state.error()
    }
  }

  const handleModelCard = async (id: string) => {
    let url = `/model-base/list/public-model/public-model-datail/${id}?prePagePath=${route.path}&prePageName=我的收藏`
    window.open(url, '_blank')
  }
  /* 评估 */
  const modelFormShow = ref(false)
  const modelFormState = ref({
    id: ''
  })
  const openEditForm = (id: string) => {
    modelFormShow.value = true
    modelFormState.value.id = id
  }
  //搜索
  const handleSearch = (data: HeaderSearchEvents) => {
    collectList.value = []
    pageForm.value.objectName = data.inputValue
    pageForm.value.offset = 1
    identifier.value = new Date().getTime()
  }

  const refreshDataList = () => {
    pageForm.value.offset = 1
    collectList.value = []
    identifier.value = Date.now()
  }
</script>
<style lang="less" scoped>
  .card-content {
    display: grid;
    width: 100%;
    gap: 20px;
    row-gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(313px, 1fr));
  }

  .devider {
    width: 0.5px;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .more-box {
    img {
      padding: 4px;

      &:hover {
        background: @background5;
        border-radius: 6px;
      }
    }
  }
</style>
